<template>
  <div id='my_form'>
    <view-box ref="viewBox">

      <div v-if='pageType!="baoming"' style="position: absolute;top: 0;max-width: 850px;width: 100%;" class='headerWarpper'>
        <x-header slot="header" :left-options="{backText: ''}" style="max-width:850px;width:100%;position:fixed;top:0;z-index:100;" :title="project" :transition="headerTransition" @on-click-more="onClickMore">
          <a href="./#/racelist" style="font-size:24px" slot="right">
            <i class="fa fa-home fa-fw"></i>
          </a>

        </x-header>
      </div>

      <Myheader v-if='pageType=="baoming"' :page="page"></Myheader>
      <div v-if='pageType!="baoming"' style="padding-bottom:50px"></div>

      <card v-show="!show">
        <div slot="content" class="">
          <div style="padding-top:20px" id="form" v-show="!showLoading">

            <divider v-if="!show">{{formName}}</divider>

            <div v-show="!show" :key='index' v-for="(item, index) in form.fields">
              <!--header类型开始-->
              <div style="text-align: center" v-if="item.type=='header'">
                <h4>{{formDataArray[index].formData}}</h4>
              </div>
              <!--header类型结束-->

              <!--text类型开始-->

              <!--text-password密码-->

              <!--text-text文本输入-->
              <group v-if="item.type=='text'&&item.subtype=='text'">
                <!-- <group-title slot="title" class="group-title">
                  <span>{{item.label}}</span>
                  <span :class="isRequired(item.required)">*</span>
                </group-title> -->
                <x-input v-if='isRequired(item.required)=="required"' label-width="8em" :title='item.label+` <span style="color:red">*</span>`' type="text" :required="checkRequired(item.required)" :placeholder="item.description||item.label" placeholder-align="right" text-align="right" v-model='formDataArray[index].formData'>

                </x-input>
                <x-input v-if='isRequired(item.required)!="required"' label-width="8em" :title='item.label' type="text" :required="checkRequired(item.required)" :placeholder="item.description||item.label" placeholder-align="right" text-align="right" v-model='formDataArray[index].formData'></x-input>
              </group>

              <!--text-number数字-->

              <!--text-email电子邮箱-->
              <group v-if="item.type === 'text'&&item.subtype === 'email' ">

                <x-input v-if='isRequired(item.required)=="required"' label-width="8em" :title='item.label+`<span style="color:red"> *</span>`' is-type="email" type="email" :placeholder="item.description||item.label" placeholder-align="right" text-align="right" v-model='formDataArray[index].formData'></x-input>

                <x-input v-if='isRequired(item.required)!="required"' label-width="8em" :title='item.label' is-type="email" type="email" :placeholder="item.description||item.label" placeholder-align="right" text-align="right" v-model='formDataArray[index].formData'></x-input>
              </group>

              <!--text-mobile手机号-->
              <tel v-if="item.type === 'text'&&item.subtype === 'tel' " :item="item" :index="index" @code='code' @tel="telChangeSelf" ref="tel"></tel>
              <!--text类型结束-->

              <!--select类型开始-->

              <!--select-select单选-->
              <group v-if="item.type === 'select'&&item.subtype === 'select'" class="no-title" id="popup-radio-warpper">
                <!-- <group-title slot="title" class="group-title">
                  <span>{{item.label}}</span>
                  <span :class="isRequired(item.required)">*</span>
                </group-title> -->
                <popup-radio class='popup-radio' v-if='!!item.required' :title='item.label+`*`' value-text-align='left' :options="transformKey(item.values)" :placeholder="item.description||'选择'+item.label" v-model='formDataArray[index].formData'>

                  <div value-text-align='left' slot="popup-header" class="vux-popup-header vux-1px-b">
                    <div class="vux-popup-header-title">{{item.label}}</div>
                  </div>
                </popup-radio>

                <popup-radio v-if='!item.required' :title='item.label' value-text-align='left' :options="transformKey(item.values)" :placeholder="item.description" v-model='formDataArray[index].formData'>
                  <div value-text-align='left' slot="popup-header" class="vux-popup-header vux-1px-b">
                    <div class="vux-popup-header-title">{{item.label}}</div>
                  </div>
                </popup-radio>
              </group>

              <!--select-country国家-->

              <!--省市区四级联动-->
              <myaddress v-if="item.type === 'select'&&item.subtype === 'country'&&form.fields[index+1].type === 'select'&&form.fields[index+1].subtype === 'city'" :cityData="dataAllCity" :pcOnline="pcOnline" :item="item" :item1="form.fields[index+1]" :index="index" @address="addressChangeSelf" ref="address">
              </myaddress>

              <!--<div v-if="item.type === 'select'&&item.subtype === 'country'&&form.fields[index+1].type === 'select'&&form.fields[index+1].subtype === 'city'">
            {{item.label}}
            {{form.fields[index+1].label}}
          </div>-->
              <!--<myaddress v-if="item.type === 'select'&&item.subtype === 'country'"
                     :cityData="dataAllCity" :pcOnline="pcOnline" :item="item" :index="index"
                     @address="addressChangeSelf" ref="address">

          </myaddress>-->

              <!--select-city城市区三级联动-->

              <!--select类型结束-->

              <!--datatime类型开始-->

              <!--date-datetime 年月日时分秒-->

              <!--date-ymd 年月日-->
              <group v-if="item.type === 'date'&&item.subtype==='ymd'&&pcOnline" class="pc_date_select">
                <cell>
                  <template slot="title">
                    <span>
                      <span>{{item.label}}</span>
                      <span :class="isRequired(item.required)">*</span>
                    </span>
                  </template>
                  <el-date-picker v-model='formDataArray[index].formData' type="date" default-value="1990-01-01" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择出生日期">
                  </el-date-picker>
                </cell>
              </group>

              <group v-if="item.type === 'date'&&item.subtype==='ymd'&&!pcOnline" class="no-title" ref="date">
                <datetime :title='item.label' default-selected-value="1990-01-01" :start-date="max_birth" :end-date="min_birth" :placeholder="item.description||'选择'+item.label" v-model='formDataArray[index].formData'>
                  <template slot="title">
                    <div>
                      <p>
                        <span>{{item.label}}</span>
                        <span style="position: relative;left: 0px;" :class="isRequired(item.required)">*</span>
                      </p>
                    </div>
                  </template>

                </datetime>
              </group>

              <!--datatime-his 完赛事件-->

              <!--datatime类型结束-->

              <!--textarea类型开始-->

              <!--textarea-textarea文本域-->

              <!--textarea类型结束-->

              <!--file类型开始-->
              <!--file-file 文件类型-->
              <!--file-images 图片类型-->
              <upfile v-if="item.type === 'file'&&item.subtype === 'image'" :name="item.label" :placeholder="item.placeholder" :src="`${host}stor/base64`" :required="item.required" :index="index" @fileChange="fileChangeSelf">
              </upfile>

              <!--file-audit 审核类型-->
              <upfile v-if="item.type === 'file'&&item.subtype === 'audit'" :name="item.label" :placeholder="item.placeholder" :src="`${host}stor/base64`" :required="item.required" :index="index" @fileChange="fileChangeSelf" :defaultstate="defaultstate">
              </upfile>

              <!--file类型结束-->

              <!--raidgroup类型开始-->
              <!-- <group v-if="item.type==='radio-group'" class="pc_date_select">
                <cell>
                  <template slot="title">
                    <span style="height:24px;">
                      <span>{{item.label}}</span>
                      <span :class="isRequired(item.required)">*</span>
                    </span>
                  </template>

                </cell>
                <checklist :options="transformKey(item.values)" v-model="formDataArray[index].formData" :max="1"></checklist>
              </group> -->

              <!-- 性别 -->
              <group class='gender' v-if="item.type==='radio-group'">

                <div v-if='isRequired(item.required)=="required"'>

                  <span>{{item.label}}
                    <span style="float: initial;color:red;position: static;padding-left: 0;">*</span>
                  </span>

                  <checker v-model="formDataArray[index].formData" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
                    <!-- <checker-item v-for="(item1, index1) in item.values" :key='index1' value="item1.value">{{item1.label}}</checker-item> -->
                    <checker-item v-for="(item1, index1) in item.values" :key='index1' :value="item1.value">{{item1.label}}</checker-item>
                    <!-- <checker-item value="5">22</checker-item> -->
                  </checker>

                </div>

                <div v-if='isRequired(item.required)!="required"'>
                  <span>{{item.label}} </span>
                  <checker v-model="formDataArray[index].formData" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
                    <!-- <checker-item v-for="(item1, index1) in item.values" :key='index1' value="item1.value">{{item1.label}}</checker-item> -->
                    <checker-item v-for="(item1, index1) in item.values" :key='index1' :value="item1.value">{{item1.label}}</checker-item>
                    <!-- <checker-item value="5">22</checker-item> -->
                  </checker>

                </div>

              </group>

              <!--raidgroup类型结束-->

              <!--checkbox复选-->

              <!--header表头-->

            </div>

            <!-- <div v-show="!show" class="button-wrapper">
          <x-button type="primary" @click.native="submit()" text="提交">{{$t('form.submit')}}</x-button>
        </div> -->

          </div>

        </div>
      </card>

      <div v-show="show" id="msg">
        <msg class="msg" :title="$t('form.submitted')" :buttons="buttons" icon="success">
          <template slot="description" slot-scope="props">
            <!--   <div>
                 <p><span>姓名:</span><span v-text="name"></span></p>
                 <p><span>性别:</span><span v-text="sex"></span></p>
                 <p><span>参赛项目:</span><span v-text="project"></span></p>
               </div>-->

            <div>
              <group>
                <cell :title="$t('form.name')" :value="name"></cell>
                <cell-form-preview :list="mylist"></cell-form-preview>
              </group>
              <group v-if="payable==0">
                <div>
                  <cell :title="$t('form.detail')" @click.native="go()" is-link></cell>
                </div>
              </group>

              <group v-if="payable==1">
                <div>
                  <cell :title="$t('form.detail')" @click.native="go()" is-link></cell>
                  <cell v-if="!pay_at" :title="$t('form.pay')" @click.native="pay()" is-link></cell>
                </div>
              </group>
            </div>
          </template>
        </msg>
      </div>

    </view-box>

    <div v-show="!show&&formId&&pageType=='baoming'" class="button_header" id='x-bottom'>
      <x-header class="fixBottomButton" slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="">

        <div slot="overwrite-left"></div>
        <!-- <x-icon @click.native="showMenu=true" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon> -->

        <div class="rightbottom-button" @click="submit" style="color:#fff;font-size: 18px;" slot="right">
          提交
        </div>

      </x-header>
      <actionsheet @on-click-menu='menuClick' v-model="showMenu" :menus="menus"></actionsheet>
    </div>

    <div v-show="!show&&formId&&pageType!='baoming'" class="button_header" id='x-bottom'>
      <x-header class="fixBottomButton" slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="">
        <!-- <x-header class="fixBottomButton" slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" :title="`报名费用(¥${price})`"> -->

        <div slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;">
        </div>

        <div class="rightbottom-button" @click="submit" style="color:#fff;font-size: 18px;" slot="right">
          提交
        </div>

      </x-header>
      <actionsheet @on-click-menu='menuClick' v-model="showMenu" :menus="menus"></actionsheet>
    </div>

    <!-- <div style="width: 100vw;position: fixed;bottom: 0;" v-show="!show&&formId" id='x-bottom'>
      <x-header @click.native='submit()' slot="header" style="max-width:850px;width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition" @on-click-more="onClickMore">
        <span slot="overwrite-left">

        </span>
        <a>下一步/Next(¥{{price}}) </a>
      </x-header>
    </div> -->

    <!-- <loading :show='showLoading'></loading>-->
  </div>

</template>

<script type="text/ecmascript-6">
/* eslint-disable*/
import Vue from "vue";
import Myheader from "@/common/components/myheader.vue";
import Myflow from "@/common/components/myflow.vue";
import Loading from "@/common/components/loading.vue";
import Upfile from "@/common/components/upfile.vue";
import Tel from "@/common/components/tel.vue";
import Myaddress from "@/common/components/address.vue";
import MyFooter from "@/common/components/myfooter.vue";

import { cityData } from "@/common/locales/cityData.js";
import { countryData } from "@/common/locales/countryData1.js";

import { enCountryData } from "@/common/locales/enCountryData1.js";
import { pcCountryData } from "@/common/locales/pcCountryData1.js";
import { pcenCountryData } from "@/common/locales/pcenCountryData1.js";

import { setTitle } from "@/common/js/main.js";
import mixin from "@/common/js/mixin";
import { DatePicker, Cascader } from "element-ui";
Vue.use(DatePicker);
Vue.use(Cascader);

import {
  Checker,
  CheckerItem,
  Card,
  XHeader,
  Selector,
  Msg,
  Group,
  Cell,
  XButton,
  XInput,
  Datetime,
  PopupRadio,
  ToastPlugin,
  Scroller,
  XNumber,
  XTextarea,
  Checklist,
  XAddress,
  Divider,
  GroupTitle,
  TransferDom,
  Previewer,
  PopupPicker,
  CellFormPreview,
  ViewBox,
  cookie
} from "vux";

// 获取表单数据
import { getForm } from "@/api/getForm.js";
import { sendForm } from "@/api/sendForm.js";
import { sendPay } from "@/api/sendPay.js";
//axios
import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import { setTimeout } from "timers";

//let clock1 = 1
var isMini = false;
//判断环境 是否在小程序
var checkIsFromMiniProgram = function() {
  wx.miniProgram.getEnv(function(res) {
    console.log("minprogram:" + res.miniprogram); // true
    //  alert(JSON.stringify(res));
    if (res.miniprogram === true) {
      isMini = true;
      // alert('isMiniprogram:' + res.miniprogram);
    } else {
      isMini = false;
      // alert("========公众号");
    }
  });
};

Vue.use(ToastPlugin, { time: 3000 });
let years = [];
for (var i = 1930; i <= 2015; i++) {
  years.push({
    name: i + "年",
    value: i + ""
  });
}
let months = [];
for (var i = 1; i <= 12; i++) {
  months.push({
    name: i + "月",
    value: i + ""
  });
}
let days = [];
for (var i = 1; i <= 31; i++) {
  days.push({
    name: i + "日",
    value: i + ""
  });
}
export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      eventInfo: {},
      btndis: "",
      code: "",
      key: "",
      //验证英文字母
      mustbeEN: function(value) {
        var reg = /[a-zA-Z]/;
        return {
          valid: reg.test(value),
          msg: "must be english"
        };
      },
      data1: [
        {
          value: "zhinan",
          label: "指南"
        }
      ],
      inviteCode: "", //邀请码
      formName: "",
      state: "",
      showName: "",
      drawerVisibility: false,
      payable: 0,
      pay_at: "",
      mylist: [],
      raceid: "",
      showAddress: false,
      price: "",
      list: [
        { key: "086", value: "+86" },
        { key: "080", value: "+80" },
        { key: "084", value: "+84" },
        { key: "087", value: "+87" }
      ],
      project: "",
      show: false,
      submitData: {},
      title: "默认为空",
      disclaimer: false,
      countryData: "",
      form: {},
      bloodType: "",
      birthDate: "",
      addressData: cityData,
      formDataArray: [],
      showLoading: false,
      formId: 0, //表单id
      name: "", //姓名
      idtype: "", //护照类型
      idnum: "", //证件号
      national: "", //国籍
      country: [], //居住国家
      countryCode: "", //居住国家代码
      province: "", //居住省
      city: "", //居住市
      area: "", //居住区
      address: "", //居住详细地址
      blood: "", //血型
      cloth: "", //尺码
      mobile: "", //手机号码
      email: "", //邮箱
      emername: "", //紧急联系人姓名
      emermobile: "", //紧急联系人电话
      birth: "", //出生日期
      gender: "", //性别
      proving: true, //表单是否通过所有验证规则
      disabled: true, //表单是否禁用 禁用用来展示
      _key: "", //报名表单的key 支付用
      buttons: [], //成功报名提示的按钮
      clock: true,
      max_birth: "1991-01-01",
      min_birth: "1991-01-02",
      isDateFirst: true,
      isAddressFirst: true,
      dataIndex: 0,
      mydate: "",
      pcOnline: false,
      sexlist: [{ key: "male", value: "男" }, { key: "female", value: "女" }],
      phonelist: [
        "+1",
        "+7",
        "+20",
        "+27",
        "+30",
        "+31",
        "+32",
        "+33",
        "+34",
        "+36",
        "+39",
        "+40",
        "+43",
        "+44",
        "+45",
        "+46",
        "+47",
        "+48",
        "+49",
        "+51",
        "+52",
        "+53",
        "+54",
        "+55",
        "+56",
        "+57",
        "+58",
        "+60",
        "+61",
        "+62",
        "+63",
        "+64",
        "+65",
        "+66",
        "+81",
        "+82",
        "+84",
        "+86",
        "+90",
        "+91",
        "+92",
        "+93",
        "+94",
        "+95",
        "+98",
        "+212",
        "+213",
        "+216",
        "+218",
        "+220",
        "+221",
        "+223",
        "+224",
        "+225",
        "+226",
        "+227",
        "+228",
        "+229",
        "+230",
        "+231",
        "+232",
        "+233",
        "+234",
        "+235",
        "+236",
        "+237",
        "+239",
        "+241",
        "+242",
        "+243",
        "+244",
        "+247",
        "+248",
        "+249",
        "+251",
        "+252",
        "+253",
        "+254",
        "+255",
        "+256",
        "+257",
        "+258",
        "+260",
        "+261",
        "+262",
        "+263",
        "+264",
        "+265",
        "+266",
        "+267",
        "+268",
        "+327",
        "+331",
        "+350",
        "+351",
        "+352",
        "+353",
        "+354",
        "+355",
        "+356",
        "+357",
        "+358",
        "+359",
        "+370",
        "+371",
        "+372",
        "+373",
        "+374",
        "+375",
        "+376",
        "+377",
        "+378",
        "+380",
        "+381",
        "+386",
        "+420",
        "+421",
        "+423",
        "+501",
        "+502",
        "+503",
        "+504",
        "+505",
        "+506",
        "+507",
        "+509",
        "+591",
        "+592",
        "+593",
        "+594",
        "+595",
        "+596",
        "+597",
        "+598",
        "+599",
        "+673",
        "+674",
        "+675",
        "+676",
        "+677",
        "+679",
        "+682",
        "+684",
        "+685",
        "+689",
        "+850",
        "+852",
        "+853",
        "+855",
        "+856",
        "+880",
        "+886",
        "+960",
        "+961",
        "+962",
        "+963",
        "+964",
        "+965",
        "+966",
        "+967",
        "+968",
        "+971",
        "+972",
        "+973",
        "+974",
        "+976",
        "+977",
        "+992",
        "+993",
        "+994",
        "+995",
        "+1242",
        "+1246",
        "+1264",
        "+1268",
        "+1345",
        "+1441",
        "+1664",
        "+1670",
        "+1671",
        "+1758",
        "+1784",
        "+1787",
        "+1809",
        "+1876",
        "+1890"
      ],
      yearSelect: "1990",
      years: [years],
      monthSelect: "1",
      months: [months],
      days: [days],
      daySelect: "1",
      countryDataPC: "",
      dataAllCity: [],
      dataProvince: [],
      dataCity: [],
      dataArea: [],
      myjson: "",
      national: "",
      eventid: "",
      selectedOptions2: ["320000", "320200", "320214"],
      defaultstate: "",
      passwd: "",
      teamId: "",
      historyMessage: {}
    };
  },
  computed: {
    // 一个计算属性的 getter
    sex: function() {
      if (this.gender == "male") {
        return "男";
      } else if (this.gender == "female") {
        return "女";
      }
    },

    headerTransition() {
      if (!this.direction) return "";
      return this.direction === "forward"
        ? "vux-header-fade-in-right"
        : "vux-header-fade-in-left";
    }
  },
  mounted() {
    if (this.pageType == "baoming") {
      document.querySelector("#number").style.marginTop = "-20px";
    }
  },
  beforeCreate() {
    // if (window.localStorage.getItem("national") == "") {
    //   window.localStorage.setItem("national",'001');
    // }

    if (
      //!window.localStorage.getItem("raceId") || //赛事id
      !window.localStorage.getItem("eventId") || //项目id
      !window.localStorage.getItem("IDNumber") || //证件号
      !window.localStorage.getItem("idtype") //证件类型
      //!window.localStorage.getItem("national") //国家
    ) {
      this.$router.push({ path: "/" });
    }
    /* indexedDB('inviteCode', 'remove', this.RACEID, '',  (a)=> {
       })*/

    // 检查有无缺少前面页面设置的参数
    // indexedDB(
    //   "IDNumber",
    //   "get",
    //   this.RACEID,
    //   "",
    //   function(a) {
    //     if (!a) {
    //       this.$router.push("/list");
    //     }
    //     this.idnum = a;
    //   }.bind(this)
    // );
  },
  created() {
    let _this = this;
    this.pageType = window.localStorage.getItem("pageType");
    this.defaultstate = window.localStorage.getItem("defaultstate");
    this.project = window.localStorage.getItem("project");
    this.teamId = window.localStorage.getItem("teamId");
    //console.warn(this.teamId);
    this.passwd = window.localStorage.getItem("passwd");
    console.log(cookie.get("historyMessage"));
    if (!!cookie.get("historyMessage")) {
      this.historyMessage = JSON.parse(cookie.get("historyMessage"));
    }

    //console.log(JSON.parse(cookie.get("historyMessage")));

    //cookie.get("historyMessage");
    //console.log(JSON.parse(cookie.get("historyMessage")))
    //setTitle(this.project);

    /*


      Vue.axios.all([this.userApply(), this.getForm()]).then(
      Vue.axios.spread(function(response1, response2) {
        if (response1.data.code == 200) {
          _this.fetchData = response1.data.data;
          //console.log(_this.fetchData)

          
          
          
          
          
          _this.code1 = _this.fetchData[0].code;
          _this.mobile1 = _this.fetchData[0].mobile;

         
        }
        if (response2.data.code == 200) {
          _this.formId = response2.data.data.form.id;
          _this.formName = response2.data.data.name;
          _this.form = response2.data.data.form;

          
          
          //设置默认最小生日
          if (response2.data.data.max_birth != null) {
            _this.max_birth = response2.data.data.max_birth;
          } else {
            _this.max_birth = "1930-01-01";
          }
          //设置默认最大生日
          if (response2.data.data.min_birth != null) {
            _this.min_birth = response2.data.data.min_birth;
          } else {
            _this.min_birth =
              new Date().getFullYear() +
              "-" +
              (new Date().getMonth() + 1) +
              "-" +
              new Date().getDate();
          }

          //如果进来是字符串类型就序列化一下
          if (typeof _this.form.fields == "string") {
            _this.form.fields = JSON.parse(_this.form.fields);
          }

          //生成保存value的数组
          _this.form.fields.forEach(function(item, index) {
            //过滤掉表单的header
            if (_this.form.fields[index].type == "header") {
              _this.form.fields.splice(index, 1);
            }
            let obj = {};
            if (item.type == "date") {
              _this.dataIndex = index;
            }
            _this.formDataArray.push(obj);

            for (let key in _this.fetchData[0]) {
              if (key == item.name) {
                if (item.subtype == "tel") {
                  //console.log(item)
                  if (!!_this.fetchData[0][key]) {
                    let area = _this.fetchData[0][key].split("-")[0];
                    let tel = _this.fetchData[0][key].split("-")[1];
                    item.area = [];
                    item.area.push(area);
                    item.tel = tel;
                    //form.fields[index]
                  }
                } else if (item.type == "radio-group") {
                  _this.formDataArray[index].formData = [];
                  console.log(_this.fetchData[key]);
                  _this.formDataArray[index].formData = _this.fetchData[0][key];

                  //_this.formDataArray[index].formData.push(_this.fetchData[0][key])
                } else if (item.type == "select" && item.subtype == "select") {
                  _this.formDataArray[index].formData = _this.fetchData[0][key];
                } else if (item.type == "select" && item.subtype == "country") {
                  //_this.formDataArray[index].formData={}
                  item.country = _this.fetchData[0].country;

                  //console.log(_this.formDataArray[index].formData)
                  //                    item.country = _this.fetchData[0].country
                  //
                  //                    if (!!_this.fetchData[0].province) {
                  //                      item.province = _this.fetchData[0].province
                  //                    }
                  //
                  //                    if (!!_this.fetchData[0].city) {
                  //                      item.city = _this.fetchData[0].city
                  //                    }
                  //
                  //                    if (!!_this.fetchData[0].area) {
                  //                      item.area = _this.fetchData[0].area
                  //                    }
                } else if (item.type == "select" && item.subtype == "city") {
                  //console.log(item)
                  //console.log(_this.fetchData[0].province)
                  item.province = _this.fetchData[0].province;
                  item.city = _this.fetchData[0].city;
                  item.area = _this.fetchData[0].area;
                } else if (item.type == "file" && item.subtype == "audit") {
                  item.img = _this.fetchData[0][key];
                } else {
                  _this.formDataArray[index].formData = _this.fetchData[0][key];
                }
              }
            }
          });
        }
      })
    );


    */

    //

    // indexedDB(
    //   "defaultstate",
    //   "get",
    //   this.RACEID,
    //   "",
    //   function(a) {
    //     this.defaultstate = a;
    //   }.bind(this)
    // );

    // indexedDB("invite", "get", this.RACEID, "", a => {
    //   if (a) {
    //     this.inviteCode = a.invitationCode;
    //     this.submitData.invite = this.inviteCode;
    //   }
    // });

    //判断手机端还是PC
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.pcOnline = false;
    } else {
      this.pcOnline = true;
      this.dataAllCity = data2tree(cityData);
    }

    this.national = window.localStorage.getItem("national");
    if (this.pcOnline) {
      if (
        this.national !== "001" ||
        this.national !== "001081" ||
        this.national !== "001071" ||
        this.national !== "001082"
      ) {
        this.countryDataPC = pcenCountryData;
      } else {
        this.countryDataPC = pcCountryData;
      }
    } else {
      if (
        this.national !== "001" ||
        this.national !== "001081" ||
        this.national !== "001071" ||
        this.national !== "001082"
      ) {
        this.countryData = enCountryData;
      } else {
        this.countryData = countryData;
      }
    }

    this.idtype = window.localStorage.getItem("idtype");
    this.raceid = window.localStorage.getItem("raceId");
    this.eventid = window.localStorage.getItem("eventId");
    this.idnum = window.localStorage.getItem("IDNumber");
    this.inviteCode = window.localStorage.getItem("invitationCode");
    this.inviteEventId = window.localStorage.getItem("invitationEventId");

    // indexedDB(
    //   "national",
    //   "get",
    //   this.RACEID,
    //   "",
    //   function(a) {
    //     this.national = a;
    //     if (this.pcOnline) {
    //       if (
    //         this.national !== "001" ||
    //         this.national !== "001081" ||
    //         this.national !== "001071" ||
    //         this.national !== "001082"
    //       ) {
    //         this.countryDataPC = pcenCountryData;
    //       } else {
    //         this.countryDataPC = pcCountryData;
    //       }
    //     } else {
    //       if (
    //         this.national !== "001" ||
    //         this.national !== "001081" ||
    //         this.national !== "001071" ||
    //         this.national !== "001082"
    //       ) {
    //         this.countryData = enCountryData;
    //       } else {
    //         this.countryData = countryData;
    //       }
    //     }
    //   }.bind(this)
    // );
    // indexedDB(
    //   "idtype",
    //   "get",
    //   this.RACEID,
    //   "",
    //   function(a) {
    //     this.idtype = a;
    //   }.bind(this)
    // );
    // indexedDB(
    //   "raceid",
    //   "get",
    //   this.RACEID,
    //   "",
    //   function(a) {
    //     this.raceid = a;
    //   }.bind(this)
    // );
    getForm(`${host}event/show`, { eventid: this.eventid }).then(response => {
      if (response.data.code == "200") {
        this.eventInfo = response.data.data;
        this.formId = response.data.data.form.id;
        this.formName = response.data.data.name;
        this.price = response.data.data.price;

        // console.log('-+_+_+_+_+')
        // console.log(response.data.data.form.fields)
        // console.log(JSON.parse(cookie.get("historyMessage")))

        //this.showLoading = false

        //var json=JSON.parse("[{\"type\":\"header\",\"subtype\":\"h2\",\"label\":\"个人基本信息\"},{\"type\":\"text\",\"required\":true,\"label\":\"姓名\",\"name\":\"name\",\"subtype\":\"text\"},{\"type\":\"radio-group\",\"required\":true,\"label\":\"性别\",\"name\":\"gender\",\"values\":[{\"label\":\"男\",\"value\":\"male\"},{\"label\":\"女\",\"value\":\"female\"}]},{\"type\":\"date\",\"label\":\"出生日期\",\"name\":\"birth\"},{\"type\":\"text\",\"subtype\":\"tel\",\"required\":true,\"label\":\"手机号码\",\"name\":\"mobile\"},{\"type\":\"text\",\"subtype\":\"email\",\"required\":true,\"label\":\"电子邮箱\",\"name\":\"email\"},{\"type\":\"text\",\"required\":true,\"label\":\"居住地址\",\"description\":\"XXX省XX市XX区XXX街/路XX号XX室\",\"placeholder\":\"详细地址\",\"name\":\"dizhi\",\"subtype\":\"text\"},{\"type\":\"text\",\"required\":true,\"label\":\"紧急联系人\",\"name\":\"emername\",\"subtype\":\"text\"},{\"type\":\"text\",\"subtype\":\"tel\",\"required\":true,\"label\":\"紧急联系人电话\",\"name\":\"emermobile\"},{\"type\":\"file\",\"required\":true,\"label\":\"个人免冠照片1\",\"description\":\"建议小于2M\",\"name\":\"images1\",\"subtype\":\"file\"},{\"type\":\"file\",\"required\":true,\"label\":\"个人免冠照片2\",\"description\":\"建议小于2M\",\"name\":\"images2\",\"subtype\":\"file\"},{\"type\":\"header\",\"subtype\":\"h2\",\"label\":\"报名资质信息\"},{\"type\":\"text\",\"label\":\"跑圈昵称\",\"placeholder\":\"选填\",\"name\":\"runname\",\"subtype\":\"text\"},{\"type\":\"text\",\"label\":\"所属跑团\",\"placeholder\":\"选填\",\"name\":\"rungroup\",\"subtype\":\"text\"},{\"type\":\"text\",\"required\":true,\"label\":\"配速员宣言\",\"name\":\"peisuinfo\",\"subtype\":\"text\"},{\"type\":\"textarea\",\"label\":\"跑步故事\",\"description\":\"分享你的跑步故事\",\"placeholder\":\"选填\",\"name\":\"runstory\",\"subtype\":\"textarea\"},{\"type\":\"select\",\"required\":true,\"label\":\"申请配速组别\",\"description\":\"选择希望入选的领跑配速（全程）\",\"name\":\"peisugroup\",\"values\":[{\"label\":\"310\",\"value\":\"1\",\"selected\":true},{\"label\":\"330\",\"value\":\"2\"},{\"label\":\"345\",\"value\":\"3\"},{\"label\":\"400\",\"value\":\"4\"},{\"label\":\"415\",\"value\":\"5\"},{\"label\":\"430\",\"value\":\"6\"},{\"label\":\"445\",\"value\":\"7\"},{\"label\":\"500\",\"value\":\"8\"},{\"label\":\"515\",\"value\":\"9\"},{\"label\":\"530\",\"value\":\"10\"},{\"label\":\"545\",\"value\":\"11\"},{\"label\":\"600\",\"value\":\"12\"},{\"label\":\"615\",\"value\":\"13\"}]},{\"type\":\"text\",\"required\":true,\"label\":\"近一年最好全程马拉松成绩及赛事名称\",\"description\":\"如：3:10:00，2017无锡马拉松（仅限填1个赛事）\",\"name\":\"bestscore\",\"subtype\":\"text\"},{\"type\":\"file\",\"required\":true,\"label\":\"近一年最好成绩全程马拉松完整证书(电子版)\",\"description\":\"建议小于2M\",\"name\":\"bestimage\",\"subtype\":\"file\"},{\"type\":\"text\",\"label\":\"近一年担任全程马拉松赛领跑员经历及配速组\",\"description\":\"如：2017无锡马拉松，全程 310\",\"placeholder\":\"选填\",\"name\":\"lingpaoinfo\",\"subtype\":\"text\"},{\"type\":\"text\",\"label\":\"是否有ASICS亚瑟士PACER经历\",\"description\":\"如：2017无锡马拉松，全程 310\",\"placeholder\":\"选填\",\"name\":\"apacer\",\"subtype\":\"text\"},{\"type\":\"text\",\"label\":\"个人特殊技能\",\"description\":\"急救资格证书（如:AHA\\\\FAT\\\\第一反应、OSMART等机构培训证书），具有优先录取权\",\"placeholder\":\"选填\",\"name\":\"skill\",\"subtype\":\"text\"},{\"type\":\"file\",\"label\":\"个人特殊技能证书(电子版)\",\"description\":\"建议小于2M\",\"name\":\"skilliamge\",\"subtype\":\"file\"}]")
        //var  json=JSON.parse('[{"type":"header","subtype":"h2","label":"个人基本信息"},{"type":"text","required":true,"label":"姓名","placeholder":"请输入您的姓名","name":"name","subtype":"text"},{"type":"radio-group","label":"性别","name":"gender","values":[{"label":"男","value":"male"},{"label":"女","value":"female"}]},{"type":"date","required":true,"label":"出生日期","name":"birth"},{"type":"text","subtype":"tel","required":true,"label":"电话号码","placeholder":"请输入您的电话号码","name":"mobile"},{"type":"text","subtype":"email","label":"邮箱","placeholder":"请输入您的邮箱","name":"email"},{"type":"text","label":"紧急联系人","name":"emername","subtype":"text"},{"type":"text","label":"地址","name":"dizhi","subtype":"text"},{"type":"text","label":"居住地址","placeholder":"我的家乡是无锡","name":"address","subtype":"text"},{"type":"text","subtype":"tel","label":"紧急联系人电话","placeholder":"请输入您的紧急联系人号码","name":"emermobile"},{"type":"radio-group","required":true,"label":"血型","name":"blood","values":[{"label":"A血型","value":"A"},{"label":"B血型","value":"B"},{"label":"AB血型","value":"AB"},{"label":"O血型","value":"O"},{"label":"其他血型","value":"Other"}]},{"type":"radio-group","required":true,"label":"服装尺码","name":"cloth","values":[{"label":"XXS","value":"XXS"},{"label":"XS","value":"XS"},{"label":"S","value":"S"},{"label":"M","value":"M"},{"label":"L","value":"L"},{"label":"XL","value":"XL"},{"label":"XXL","value":"XXL"}]},{"type":"file","label":"文件上传","placeholder":"你好","name":"file-1514446491119","subtype":"file"},{"type":"radio-group","label":"单选组","name":"radio-group-1514447557656","values":[{"label":"选项 1","value":"1"},{"label":"选项 2","value":"2"},{"label":"选项 3","value":"3"}]},{"subject":"111"}]')
        //this.myjson=json
        //mock数据
        //response.data.data.form.fields = json

        //                response.data.data.form.fields = [{
        //                  "type": "header",
        //                  "subtype": "h1",
        //                  "label": "表单"
        //                },{
        //                  "type": "text",
        //                  "required": "true",
        //                  "label": "姓名",
        //                  "description": "请输入正确的姓名11",
        //                  "name": "name",
        //                  "subtype": "text"
        //                }, {
        //                  "type": "radio-group",
        //                  "required": "true",
        //                  "label": "性别",
        //                  "name": "gender",
        //                  "values": [{
        //                    "label": "男",
        //                    "value": "male",
        //                    "selected": "true"
        //                  }, {
        //                    "label": "女",
        //                    "value": "female"
        //                  }]
        //                }, {
        //                  "type": "date",
        //                  "subtype": "ymd",
        //                  "required": "true",
        //                  "label": "出生日期",
        //                  "description": "请填写正确的出生日期",
        //                  "name": "birth"
        //                }, {
        //                  "type": "text",
        //                  "subtype": "tel",
        //                  "required": "true",
        //                  "label": "联系电话",
        //                  "name": "mobile"
        //                }, {
        //                  "type": "text",
        //                  "subtype": "email",
        //                  "required": "true",
        //                  "label": "电子邮箱",
        //                  "description": "请正确填写邮箱地址便于接收赛会通知",
        //                  "name": "email"
        //                }, {
        //                  "type": "text",
        //                  "required": "true",
        //                  "label": "紧急联系人",
        //                  "description": "请填写紧急联系人姓名",
        //                  "name": "emerperson",
        //                  "subtype": "text"
        //                }, {
        //                  "type": "text",
        //                  "subtype": "tel",
        //                  "label": "紧急联系人电话",
        //                  "description": "请填写正确的电话号码（推荐手机号）",
        //                  "name": "emermobile"
        //                }, {
        //                  "type": "select",
        //                  "subtype": "country",
        //                  "required": "true",
        //                  "label": "居住国家",
        //                  "placeholder": "请选择国家",
        //                  "name": "country",
        //                  "multiple": "true",
        //                  "values": [{
        //                    "label": "Option 1",
        //                    "value": "option-1",
        //                    "selected": "true"
        //                  }, {
        //                    "label": "Option 2",
        //                    "value": "option-2"
        //                  }, {
        //                    "label": "Option 3",
        //                    "value": "option-3"
        //                  }]
        //                }, {
        //                  "type": "select",
        //                  "subtype": "city",
        //                  "required": "true",
        //                  "label": "居住城市",
        //                  "placeholder": "请选择城市",
        //                  "name": "city",
        //                  "values": [{
        //                    "label": "Option 1",
        //                    "value": "option-1",
        //                    "selected": "true"
        //                  }, {
        //                    "label": "Option 2",
        //                    "value": "option-2"
        //                  }, {
        //                    "label": "Option 3",
        //                    "value": "option-3"
        //                  }]
        //                }, {
        //                  "type": "text",
        //                  "label": "邮寄地址",
        //                  "description": "请填写正确的物流可达的地址便于赛会邮寄物品",
        //                  "name": "address",
        //                  "subtype": "text"
        //                }, {
        //                  "type": "select",
        //                  "required": "true",
        //                  "label": "血型",
        //                  "description": "请如实选择，以便在必要时进行参考",
        //                  "placeholder": "血型",
        //                  "name": "bloodtype",
        //                  "subtype": "select",
        //                  "values": [{
        //                    "label": "A型",
        //                    "value": "A",
        //                    "selected": "true"
        //                  }, {
        //                    "label": "B型",
        //                    "value": "B"
        //                  }, {
        //                    "label": "AB型",
        //                    "value": "AB"
        //                  }, {
        //                    "label": "O型",
        //                    "value": "O"
        //                  }, {
        //                    "label": "不清楚",
        //                    "value": "other"
        //                  }]
        //                }, {
        //                  "type": "file",
        //                  "label": "成绩证明",
        //                  "description": "请上传真实有效的成绩证明（图片格式）",
        //                  "name": "certificates",
        //                  "subtype": "audit"
        //                }]

        //console.log('--')
        //console.log(response.data.data.form.fields)

        this.form = response.data.data.form;

        //console.log(this.form

        if (response.data.data.max_birth != null) {
          this.max_birth = response.data.data.max_birth;
        } else {
          this.max_birth = "1930-01-01";
        }

        if (response.data.data.min_birth != null) {
          this.min_birth = response.data.data.min_birth;
        } else {
          if (new Date().getMonth() + 1 < 10) {
            this.min_birth =
              new Date().getFullYear() +
              "-" +
              "0" +
              (new Date().getMonth() + 1) +
              "-" +
              new Date().getDate();
          } else {
            this.min_birth =
              new Date().getFullYear() +
              "-" +
              (new Date().getMonth() + 1) +
              "-" +
              new Date().getDate();
          }
        }
        //console.log(this.min_birth);

        if (typeof this.form.fields == "string") {
          this.form.fields = JSON.parse(this.form.fields);
        }

        //过滤掉表单的header
        //this.form.fields.shift()

        //生成保存value的数组
        //console.log("-+-+-+-+");
        //console.log(_this.historyMessage);
        this.form.fields.forEach(function(item, index) {
          //过滤掉表单的header
          /*   if (_this.form.fields[index].type == 'header') {

               _this.form.fields.splice(index, 1)
               }*/

          let obj = {};

          if (item.type === "header") {
            _this.formDataArray.push({ formData: item.label });
          } else {
            _this.formDataArray.push(obj);

            if (!!cookie.get("historyMessage")) {
              if (item.subtype == "text" || item.subtype == "email") {
                for (var key in _this.historyMessage) {
                  if (key == item.name) {
                    _this.formDataArray[index].formData =
                      _this.historyMessage[key];
                  }
                }
              } else if (item.subtype == "ymd") {
                for (var key in _this.historyMessage) {
                  if (key == item.name) {
                    _this.formDataArray[index].formData =
                      _this.historyMessage[key];
                  }
                }
              } else if (item.type == "radio-group") {
                for (var key in _this.historyMessage) {
                  if (key == item.name) {
                    _this.formDataArray[index].formData =
                      _this.historyMessage[key];
                  }
                }
              } else if (item.subtype == "tel" && item.name != "mobile") {
                for (var key in _this.historyMessage) {
                  if (key == item.name) {
                    //console.log(key);
                    if (!!_this.historyMessage[key]) {
                      let area = _this.historyMessage[key].split("-")[0];
                      let tel = _this.historyMessage[key].split("-")[1];
                      item.area = [];
                      item.area.push(area);
                      item.tel = tel;

                      _this.formDataArray[index].formData =
                        _this.historyMessage[key];
                    }
                  }
                }
              } else if (item.name == "mobile") {
                for (var key in _this.historyMessage) {
                  if (key == item.name) {
                    if (!!_this.historyMessage[key]) {
                      let area = _this.historyMessage["code"];
                      let tel = _this.historyMessage["mobile"];
                      item.area = [];
                      item.area.push(area);
                      item.tel = tel;

                      _this.formDataArray[index].formData =
                        _this.historyMessage[key];
                    }
                  }
                }
              } else if (item.name == "country") {
                if (!!_this.historyMessage["country"]) {
                  item.country = _this.historyMessage["country"];
                }
              } else if (item.name == "city") {
                if (
                  !!_this.historyMessage["province"] &&
                  !!_this.historyMessage["city"] &&
                  !!_this.historyMessage["area"]
                ) {
                  item.city = {
                    province: _this.historyMessage["province"],
                    city: _this.historyMessage["city"],
                    area: _this.historyMessage["area"]
                  };
                }
              } else if (item.subtype == "select") {
                for (var key in _this.historyMessage) {
                  if (key == item.name) {
                    _this.formDataArray[index].formData =
                      _this.historyMessage[key];
                  }
                }
              }
            }
          }

          if (item.type == "date") {
            _this.dataIndex = index;
          }
        });

        setTimeout(() => {
          //console.log(document.querySelectorAll(".popup-radio"));
          document.querySelectorAll(".popup-radio").forEach((item, index) => {
            let connect = item.querySelector(".vux-label");
            if (connect.innerHTML.indexOf("*") != -1) {
              connect.innerHTML = connect.innerHTML.replace("*", "");
              connect.innerHTML =
                connect.innerHTML +
                `<span style='color:red;padding-left:5px'>*</span>`;
            }

            //console.log(connect.innerHTML);
          });

          // document
          //   .querySelectorAll(".weui-cell.vux-tap-active.weui-cell_access")
          //   .forEach((item, index) => {
          //     console.log(item)
          //   });
        }, 0);
      } else {
        _this.$vux.toast.show({
          type: "warn",
          text: response.data.msg
        });
      }
    });
  },
  methods: {
    onClickMore() {
      this.drawerVisibility = true;
    },
    go() {
      this.$router.push({
        path: `/message?race_id=${this.raceInfo.id}&_key=${this._key}`
      });

      // this.$router.push({
      //   path: "/messagedetail"
      // });
    },
    changeCountry(val) {
      if (val[0] == "001") {
        this.showAddress = true;
      } else {
        this.showAddress = false;
      }
      this.countryCode = val[0];
    },
    pay() {
      if (this.payable != 1) {
        this.$vux.toast.show({
          type: "warn",
          text: this.state
        });
        return;
      }

      sendPay(`${host}registration/pay`, {
        //raceid: this.raceid,
        id: this._key
      }).then(response => {
        if (response.data.code == "200") {
          window.location.href = response.data.data.url;
        } else {
          //console.log(response)
          this.$vux.toast.show({
            type: "warn",
            text: response.data.msg
          });
        }
      });
    },
    fileChangeSelf(opt) {
      // console.log(opt)
      this.formDataArray[opt.index].formData = opt.files;
    },
    telChangeSelf(opt) {
      //console.log(opt)
      this.formDataArray[opt.index].formData = opt;
    },
    addressChangeSelf(opt) {
      this.formDataArray[opt.index].formData = opt.data;
    },
    isRequired: function(required) {
      if (required) {
        return "required";
      }
      return "norequired";
    },
    checkMobile: function(str) {
      //验证手机号码
      // console.log(str)
      // console.log(event.target)
      // alert(1)
      //去除空格
      str = str.replace(/\s+/g, "");
      return {
        valid: /^1[1234567890]\d{9}$/.test(str),
        msg: "请填写符合规则的手机号码"
      };
    },
    submit() {
      let _this = this;
      if (this.btndis == true) {
        return;
      }

      // 验证必选项
      for (let i = 0; i < _this.form.fields.length; i++) {
        if (!!this.teamId) {
          this.submitData.teamid = this.teamId;
        }

        if (!!this.passwd) {
          this.submitData.passwd = this.passwd;
        }

        if (!!this.inviteCode) {
          this.submitData.invite = this.inviteCode;
        }

        //提取报名表ID
        this.submitData.eventid = this.eventid;
        //提取证件类型
        this.submitData.idtype = this.idtype;
        //提取证件号
        this.submitData.idnum = this.idnum;
        //国籍sub
        this.submitData.national = this.national;
        //邀请码

        //email

        //this.submitData.invite = this.inviteCode;

        //console.log(_this.form.fields[i])

        //处理国家处理
        if (
          _this.form.fields[i].type === "select" &&
          _this.form.fields[i].subtype === "country"
        ) {
          //如果有国家表单就提取国家数据
          //console.log(_this.formDataArray[i])
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData.country;
          //console.warn(_this.formDataArray[i].formData)
          //this.submitData[_this.form.fields[i].name] =_this.formDataArray[i]
        } else if (
          _this.form.fields[i].type === "text" &&
          _this.form.fields[i].subtype === "text"
        ) {
          if (_this.form.fields[i].name == "name") {
            this.name = _this.formDataArray[i].formData;
          }
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "text" &&
          _this.form.fields[i].subtype === "email"
        ) {
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "select" &&
          _this.form.fields[i].subtype === "city"
        ) {
          //处理省市区数据
          _this.formDataArray[i].formData = {};
          _this.formDataArray[i].formData.province =
            _this.formDataArray[i - 1].formData.province;
          _this.formDataArray[i].formData.city =
            _this.formDataArray[i - 1].formData.city;
          _this.formDataArray[i].formData.area =
            _this.formDataArray[i - 1].formData.area;
          this.submitData[_this.form.fields[i].name] = {};
          this.submitData[_this.form.fields[i].name].province =
            _this.formDataArray[i].formData.province;
          this.submitData[_this.form.fields[i].name].city =
            _this.formDataArray[i].formData.city;
          this.submitData[_this.form.fields[i].name].area =
            _this.formDataArray[i].formData.area;
          if (
            _this.formDataArray[i - 1].formData.country == "001" &&
            !this.submitData[_this.form.fields[i].name].province
          ) {
            this.proving = false;
            _this.$vux.toast.show({
              text: "请选择城市",
              type: "warn"
            });
            return;
          }
        } else if (
          _this.form.fields[i].type === "date" &&
          _this.form.fields[i].subtype === "ymd" &&
          _this.form.fields[i].name != "birth"
        ) {
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (_this.form.fields[i].type === "radio-group") {
          //处理radio-group类型
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "select" &&
          _this.form.fields[i].subtype === "select"
        ) {
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "file" &&
          _this.form.fields[i].subtype === "audit"
        ) {
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "file" &&
          _this.form.fields[i].subtype === "image"
        ) {
          this.submitData[_this.form.fields[i].name] =
            _this.formDataArray[i].formData;
        } else if (
          _this.form.fields[i].type === "text" &&
          _this.form.fields[i].subtype === "tel"
        ) {
          if (
            _this.form.fields[i].required &&
            typeof _this.formDataArray[i].formData == "undefined"
          ) {
            _this.$vux.toast.show({
              text:
                `${_this.form.fields[i].label}` + _this.$t("form.mustenter"),
              type: "warn"
            });
            this.proving = false;
          } else {
            this.submitData[_this.form.fields[i].name] =
              _this.formDataArray[i].formData;
          }

          if (typeof this.formDataArray[i].formData == "undefined") {
            // alert(2)
          } else {
            if (!!_this.formDataArray[i].formData.tel) {
              this.submitData[_this.form.fields[i].name] =
                _this.formDataArray[i].formData.telCode +
                "-" +
                _this.formDataArray[i].formData.tel.replace(/\s+/g, "");
            } else {
            }
          }
        }

        if (
          _this.form.fields[i].required &&
          typeof _this.formDataArray[i].formData == "undefined"
        ) {
          //没有数据
          _this.$vux.toast.show({
            text: `${_this.form.fields[i].label}是必填`,
            type: "warn"
          });
          // 验证未通过
          this.proving = false;
          return;
        }

        //审核报名资料必填 如果是审核状态并且有审核的资料certificates
        if (
          (this.defaultstate == "audit" &&
            _this.form.fields[i].type === "file" &&
            _this.form.fields[i].subtype === "audit") ||
          _this.form.fields[i].subtype == "certificates"
        ) {
          //console.log(_this.formDataArray[i].formData)
          if (!_this.formDataArray[i].formData) {
            //没有数据
            _this.$vux.toast.show({
              text: `${_this.form.fields[i].label}是必填`,
              type: "warn"
            });
            // 验证未通过
            this.proving = false;
            return;
          } else if (_this.formDataArray[i].formData.length == 0) {
            //没有数据
            _this.$vux.toast.show({
              text: `${_this.form.fields[i].label}是必填`,
              type: "warn"
            });
            // 验证未通过
            this.proving = false;
            return;
          } else {
          }
        } else if (_this.form.fields[i].name === "birth") {
          /*       else if (_this.form.fields[i].name === 'mobile') {
           //电话
           if (typeof(_this.formDataArray[i].formData) !== "undefined") {
           this.submitData.mobile = _this.formDataArray[i].formData.telCode + '-' + _this.formDataArray[i].formData.tel.replace(/\s+/g, "")
           } else {
           this.submitData.mobile = ''
           }
           }*/

          //          else if (_this.form.fields[i].name === 'email') {
          //            //邮件
          //            if (typeof(_this.formDataArray[i].formData) !== "undefined") {
          //              this.submitData.email = _this.formDataArray[i].formData
          //            } else {
          //              this.submitData.email = ''
          //            }
          //          } else if (_this.form.fields[i].name === 'emername') {
          //            //紧急联系人姓名
          //            if (typeof(_this.formDataArray[i].formData) !== "undefined") {
          //              this.submitData.emername = _this.formDataArray[i].formData
          //            } else {
          //              this.submitData.emername = ''
          //            }
          //          }

          /*          else if (_this.form.fields[i].name === 'emermobile') {
           //紧急联系人电话

           if (typeof(_this.formDataArray[i].formData) !== "undefined") {
           this.submitData.emermobile = _this.formDataArray[i].formData.telCode + '-' + _this.formDataArray[i].formData.tel.replace(/\s+/g, "")
           } else {
           this.submitData.emermobile = ''
           }
           } */

          //生日
          //在PC端取PC得值
          /*      if (this.pcOnline) {
             this.submitData.birth = this.yearSelect + '-' + this.addZero(this.monthSelect) + '-' + this.addZero(this.daySelect)
             this.formDataArray[i].formData = this.submitData.birth
             console.log(this.submitData.birth)
             } else {
             if (typeof(_this.formDataArray[i].formData) !== "undefined") {
             this.submitData.birth = _this.formDataArray[i].formData
             } else {
             this.submitData.birth = ''
             }
             }*/
          if (typeof _this.formDataArray[i].formData !== "undefined") {
            this.submitData.birth = _this.formDataArray[i].formData;
          } else {
            this.submitData.birth = "";
          }
        }

        //提取
        if (_this.form.fields[i].name === "gender") {
          //console.log(_this.formDataArray[i].formData);

          this.gender = _this.formDataArray[i].formData;
          

          if (_this.eventInfo.male == 1 && _this.eventInfo.female == 1) {
          } else if (_this.eventInfo.male == 1 && this.gender == "female") {
            //限制男性
            _this.$vux.toast.show({
              text: `该项目只能男性报名`,
              type: "warn"
            });
            return;
          
        } else if (_this.eventInfo.female == 1 && this.gender == "male") {
          //限制女性
          _this.$vux.toast.show({
              text: `该项目只能女性报名`,
              type: "warn"
            });
            return;
        }
        
          


          //console.log("---9988---");
          //console.log(_this.eventInfo);
        }

        if (
          _this.form.fields[i].name == "firstname" &&
          _this.formDataArray[i].formData != ""
        ) {
          if (!/[a-zA-Z]/.test(_this.formDataArray[i].formData)) {
            _this.$vux.toast.show({
              text: `请输入正确的英文名`,
              type: "warn"
            });
            return;
          }
        }

        if (
          _this.form.fields[i].name == "lastname" &&
          _this.formDataArray[i].formData != ""
        ) {
          if (!/[a-zA-Z]/.test(_this.formDataArray[i].formData)) {
            _this.$vux.toast.show({
              text: `请输入正确的英文名`,
              type: "warn"
            });
            return;
          }
        }

        //提交的时候更新tel
        if (_this.form.fields[i].subtype === "tel") {
          //console.log(_this.form.fields[i]);

          this.$refs.tel.forEach(function(item, index) {
            if (item.index === i) {
              if (!!item.formData) {
              } else {
                item.formData = "";
              }
              if (item.formData == "") {
                return;
              }
              _this.formDataArray[i].formData = {
                telCode: item.telCode,
                tel: item.formData.replace(/\s+/g, "")
              };
            }
          });
        }

        if (_this.form.fields[i].required) {
          // console.log(_this.formDataArray)
          if (
            _this.form.fields[i].subtype == "address" &&
            _this.countryCode != "001"
          ) {
            _this.formDataArray[i][0] = "";
            _this.formDataArray[i][1] = "";
            _this.formDataArray[i][2] = "";
          } else {
            //              if (!_this.formDataArray[i].formData || _this.formDataArray[i].formData.length === 0) {
            //
            //                _this.$vux.toast.show({
            //                  text: `${_this.form.fields[i].label}` + _this.$t('form.mustenter'),
            //                  type: 'warn'
            //                })
            //                // 验证未通过
            //                this.proving = false
            //                return
            //              }
          }

          // 验证手机号码
          if (
            _this.form.fields[i].subtype === "tel" &&
            _this.formDataArray[i].formData.telCode[0] == "+86" &&
            !/^1[1234567890]\d{9}$/.test(_this.formDataArray[i].formData.tel)
          ) {
            _this.$vux.toast.show({
              text:
                `${_this.form.fields[i].label}` + _this.$t("form.telnotlegal"),
              type: "warn"
            });
            // 验证未通过
            this.proving = false;
            return;
          }
          // 验证邮箱
          if (
            _this.form.fields[i].subtype === "email" &&
            !/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(
              _this.formDataArray[i].formData
            )
          ) {
            //console.log('---')
            //console.log((/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(_this.formDataArray[i].formData)))
            //console.log(_this.formDataArray[i].formData)
            _this.$vux.toast.show({
              text:
                `${_this.form.fields[i].label}` +
                _this.$t("form.addressnotlegal"),
              type: "warn"
            });
            // 验证未通过
            this.proving = false;
            return;
          }

          this.proving = true;
        } else {
          //验证手机号码
          if (
            _this.form.fields[i].subtype === "tel" &&
            typeof _this.formDataArray[i].formData !== "undefined" &&
            this.formDataArray[i].formData.telCode === "086"
          ) {
            //console.log(_this.formDataArray[i].formData);
            if (_this.formDataArray[i].formData.tel == "") {
            } else {
              if (
                !/^1[1234567890]\d{9}$/.test(
                  _this.formDataArray[i].formData.tel
                )
              ) {
                _this.$vux.toast.show({
                  text:
                    `${_this.form.fields[i].label}` +
                    _this.$t("form.telnotlegal"),
                  type: "warn"
                });
                this.proving = false;
                return;
              }
            }
          }
        }
      }

      if (this.submitData.emermobile === this.submitData.mobile) {
        _this.$vux.toast.show({
          text: "本人联系号码与紧急联系人号码不能相同",
          type: "warn"
        });
        this.proving = false;
        return;
      }

      if (!this.proving) {
        return;
      }

      // 把提交的数据转成formdata格式

      //开启loading动画

      // _this.$vux.loading.show({
      //   text: '提交中'
      // })
      /* for (let key in this.submitData) {
         if (this.submitData[key] == '' || this.submitData[key].indexOf('+') == 0) {
         delete this.submitData[key];
         }
         }*/
      //console.log(this.submitData)
      for (let key in this.submitData) {
        if (this.submitData[key] == "") {
          delete this.submitData[key];
        }
      }
      //console.log(this.submitData)

      //http://api.ihuipao.com/
      //sendForm(`http://v3.ihuipao.com/registration/save`, this.submitData).then((response) => {
      sendForm(`${host}registration/save`, this.submitData).then(response => {
        let _this = this;

        //取消loading动画
        // this.$vux.loading.hide()
        //state
        // 展示报名成功页面

        if (response.data.code == "200") {
          this.btndis = true;
          //清除前面保存的信息
          window.localStorage.removeItem("eventId");
          window.localStorage.removeItem("IDNumber");
          window.localStorage.removeItem("idtype");
          window.localStorage.removeItem("national");

          window.localStorage.removeItem("invite");
          window.localStorage.removeItem("invitationCode");
          window.localStorage.removeItem("invitationEventId");

          window.localStorage.removeItem("teamId");
          window.localStorage.removeItem("passwd");

          //window.localStorage.setItem("baomingState",1);

          //indexedDB("invite", "remove", this.RACEID, "", a => {});
          cookie.set("idnum", this.idnum);
          cookie.set("eventid", this.eventid);
          if (!!cookie.get("_sid")) {
          } else {
            cookie.set("_sid", response.data.data._sid);
          }

          if (response.data.data.payable != 1) {
            //不进入支付流程 跳转报名信息展示
            this.payable = 0;
            this.pay_at = response.data.data.pay_at;
            /*   _this.buttons.push({
               type: 'default',
               text: '去支付',
               })*/
          } else if (response.data.data.payable === 1) {
            //可以进入支付流程
            this.payable = 1;
            this.pay_at = response.data.data.pay_at;
            /*    _this.buttons.push({
               type: 'primary',
               text: '去支付',
               onClick: this.pay.bind(this)
               })*/
          }

          // indexedDB(
          //   "_sid",
          //   "set",
          //   this.RACEID,
          //   response.data.data._sid,
          //   function() {
          //   }
          // );

          if (response.data.data.state == "normal") {
            this.state = this.$t("message.normal");
          } else if (response.data.data.state == "wait") {
            if (response.data.data.pos) {
              //候补 有post人数
              this.state = `正在候补(前边有${response.data.data.pos}人)`;
            } else {
              this.state = `正在候补`;
            }
          } else if (response.data.data.state == "draw") {
            this.state = `等待抽签`;
          } else if (response.data.data.state == "undraw") {
            if (!!response.data.data.wait_post) {
              this.state = `未中签(候补代码${response.data.data.wait_post})`;
            }
            this.state = `未中签`;
          } else if (response.data.data.state == "audit") {
            this.state = `审核中`;
          } else if (response.data.data.state == "unaudit") {
            this.state = `未通过审核(${response.data.data.refusemsg})`;
          }

          this.mylist.push({
            label: this.$t("message.status"),
            value: this.state
          });
          this.mylist.push({
            label: this.$t("index.gender"),
            value: this.sex
          });
          this.mylist.push({
            label: this.$t("index.project"),
            value: this.formName
          });

          this._key = response.data.data._key;
          //alert(this._key);
          //提交资料页面：显示价格，如果报名可以支付，直接调小程序支付流程完成支付，支付成功后，跳到payDetail页面。
          //如果不可支付，直接跳到上边的页面。

          //成功提交完  判断下环境
          if (typeof wx !== "undefined") {
            checkIsFromMiniProgram();
          }

          //console.log(isMini)
          if (isMini) {
            //if (checkIsFromMiniProgram()) {
            //如果是小程序走小程序支付逻辑

            //如果不能支付就弹出提示
            if (this.payable != 1) {
              this.$vux.toast.show({
                type: "warn",
                text: this.state,
                onHide() {
                  console.log(_this.idnum);
                  //console.log('跳转detail')
                  //用证件号换key
                  _this.axios
                    .post(
                      `${host}registration/query`,
                      qs.stringify({
                        raceid: _this.raceid,
                        idnum: _this.idnum
                      })
                    )
                    .then(res => {
                      if (res.data.code == 200) {
                        _this.key = res.data.data[0]["_key"];
                        _this.$router.push({
                          path: `/detail?key=${_this._key}`
                        });
                      } else {
                        _this.$vux.toast.show({
                          text: res.data.msg,
                          type: "warn"
                        });
                      }
                    });
                }
              });
              return;
            }
            //可以支付
            sendPay(`${host}registration/pay`, {
              //raceid: this.raceid,
              id: this._key
            }).then(response => {
              if (response.data.code == "200") {
                let orderid = response.data.data.url.replace(
                  "https://ihuipao.cn/pay/show/",
                  ""
                );

                let openid = window.localStorage.getItem("openid");

                axios
                  .post(
                    `${host}api/miniprogram/pay`,
                    qs.stringify({
                      orderid: orderid,
                      openid: openid,
                      app: "registration"
                    })
                  )
                  .then(
                    response => {
                      if (response.data.code == "200") {
                        var payParam = {
                          appId: response.data.data.appId,
                          nonceStr: response.data.data.nonceStr,
                          package: response.data.data.package,
                          signType: response.data.data.signType,
                          timeStamp: response.data.data.timeStamp,
                          paySign: response.data.data.paySign,
                          _key: _this._key
                        };

                        var url =
                          "/pages/wxpay/wxpay?payParam=" +
                          encodeURIComponent(JSON.stringify(payParam));
                        wx.miniProgram.navigateTo({
                          url: url
                        });
                      }
                    },
                    error => {
                      console.log(error);
                    }
                  );

                //console.log(a);
                //
                //window.location.href = response.data.data.url;
              } else {
                //console.log(response)
                this.$vux.toast.show({
                  type: "warn",
                  text: response.data.msg
                });
              }
            });
          } else {
            this.show = true;
            //如果不在小程序去
          }
        } else {
          //提示错误信息
          _this.$vux.toast.show({
            type: "warn",
            text: response.data.msg
          });
        }
      });
    },
    change() {},
    getNumber(str) {
      return str | 0;
    },
    transformKey(array) {
      let myArray = [];
      array.forEach((item, index) => {
        let obj = {};
        obj.key = item.value;
        obj.value = item.label;
        myArray.push(obj);
      });
      return myArray;
    },
    fileUp(event, index) {
      // if(event.target=='')
      // console.log(event.target[0] === 'div')
      event.currentTarget.children[1].click();
    },
    fileChange(event, index) {
      // console.log(this.$refs.file)
      // console.log(event.target.files[0])
      event.target.parentNode.children[0].innerHTML = `<p>文件名：${
        event.target.files[0].name
      }  大小：${((event.target.files[0].size / 1024 / 1024 * 100) | 0) /
        100}M</p>`;
      // console.log(this.getIndex(event.target))
    },
    getIndex(element) {
      return Array.prototype.slice
        .call(document.querySelectorAll('input[type="file"]'))
        .indexOf(element);
    },
    checkRequired(required) {
      if (required) {
        return true;
      }
      return false;
    },
    onChangePC(val) {
      if (val == "001") {
        this.showAddress = true;
      } else {
        this.showAddress = false;
      }
      this.countryCode = val;
    },
    selectCity: function(e) {
      this.dataCity = this.dataAllCity[e.target.value].children;
      this.dataArea = this.dataCity[0].children;
      this.dataAllCity[0].value = this.dataAllCity[e.target.value].value;
    },
    selectArea: function(e) {
      this.dataArea = this.dataCity[e.target.value].children;
      this.dataCity[0].value = this.dataCity[e.target.value].value;
    },
    trueArea: function(e) {
      this.dataArea[0].value = this.dataArea[e.target.value].value;
    },
    addZero(a) {
      if (a < 10) {
        return 0 + a;
      } else {
        return a;
      }
    }
  },
  components: {
    Checker,
    CheckerItem,
    Card,
    XHeader,
    Tel,
    Divider,
    Myheader,
    Myflow,
    Group,
    Cell,
    XButton,
    XInput,
    Datetime,
    PopupRadio,
    ToastPlugin,
    Scroller,
    XNumber,
    XTextarea,
    Checklist,
    XAddress,
    Loading,
    Upfile,
    GroupTitle,
    Msg,
    Selector,
    PopupPicker,
    CellFormPreview,
    MyFooter,
    ViewBox,
    Myaddress
  }
};
function data2tree(datas) {
  var dataArray = [];
  datas.forEach(function(data) {
    var parent = data.parent;
    if (!parent) {
      var name = data.name;
      var value = data.value;
      var objTemp = {
        label: name,
        value: value,
        parent: parent
      };
      dataArray.push(objTemp);
    }
  });
  data2treeDG(datas, dataArray);
  return dataArray;
}
function data2treeDG(datas, dataArray) {
  for (var j = 0; j < dataArray.length; j++) {
    var dataArrayIndex = dataArray[j];
    var childrenArray = [];
    var CATL_CODEP = dataArrayIndex.value;
    for (var i = 0; i < datas.length; i++) {
      var data = datas[i];
      var parent = data.parent;
      if (parent == CATL_CODEP) {
        //判断是否为儿子节点
        var name = data.name;
        var value = data.value;
        var objTemp = {
          label: name,
          value: value,
          parent: parent
        };
        childrenArray.push(objTemp);
      }
    }
    if (childrenArray.length > 0) {
      dataArrayIndex.children = childrenArray;
    }

    if (childrenArray.length > 0) {
      //有儿子节点则递归
      data2treeDG(datas, childrenArray);
    } else {
    }
  }
  return dataArray;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
#form .popup-radio .weui-cell_access .weui-cell__ft {
  padding-right: 0;
}

#form .gender .vux-no-group-title {
  position: relative;
  text-align: right;
  padding-right: 15px;
  height: auto;
  min-height: 44px;
}

#my_form {
  padding-bottom: 50px;
}
#my_form .weui-cells__title {
  font-size: 17px;
}

#form .popup-radio .weui-cell__ft {
  text-align: right;
  width: 100%;
}

#form .telcode .weui-cell__ft {
  display: none;
}

#my_form .weui-tab {
  position: static;
}

#my_form .weui-tab__panel {
  padding-bottom: 0;
}

#form .norequired {
  display: none;
}

#form .required {
  //display: inline-block;
  color: #f43530;
}

#form #popup-radio-warpper .group-title {
  position: relative;
  top: 20px;
  z-index: 9;
  height: 0;
  color: #000;
  font-size: 17px;
  pointer-events: none;
}

#form .vux-label {
  width: 8em;
}

#form .demo1-item {
  border: 1px solid #ccc;
  color: #ccc;
  padding: 3px;
  padding-left: 20px;
  padding-right: 20px;
}

#form .demo1-item-selected {
  border: 1px solid #ccc;
  background: #26a2ff;
  color: #fff;
}

#form #number-warpper .group-title {
  position: relative;
  top: 20px;
  z-index: 9;
  height: 0;
  color: #000;
  font-size: 17px;
}

#form #number-warpper .weui-cell {
  height: 24px;
}

#my_form .weui-msg {
  padding-top: 0px;
}

.msg .weui-msg__desc p {
  line-height: 1.5;
}

#form .mask {
  width: 100%;
  height: 100vh;
  background: red;
  position: absolute;
}

#form .pc_country_select .vux-no-group-title {
  padding-top: 10px;
  padding-bottom: 10px;
}

#form .tel .vux-x-input {
  padding: 0;
}

#form .tel .weui-select {
  width: 105px;
  box-sizing: border-box;
}

#form .tel .weui-cell__primary {
  padding-left: 15px;
}

#form .tel .vux-x-input .vux-selector:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #e5e5e5;
  color: #e5e5e5;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}

#form input {
  font-size: 17px;
}

#form .weui-cell.popup-radio .vux-cell-bd {
  max-width: 8em;
}

// #form .popup-radio .weui-cell__ft:after {
//   display: none;
// }

// #form .telcode .weui-cell__ft {
//   display: none;
// }

#form .pc_date_select .weui-cell__ft {
  width: 100%;
}

#form .pc_date_select .vux-cell-bd {
  max-width: 8em;
}

#msg .weui-cell {
  text-align: left;
}

#msg .weui-msg__text-area {
  padding: 0;
}

.pc_date_select select {
  background-color: #ffffff;
  background-image: none !important;
  filter: none !important;
  border: 1px solid #e5e5e5;
  outline: none;
  width: 100px;
  height: 25px;
  line-height: 25px;
}

.choosecitys .weui-cell__ft {
  width: 100%;
}

.pc_address_select select {
  background-color: #ffffff;
  background-image: none !important;
  filter: none !important;
  border: 1px solid #e5e5e5;
  outline: none;
  width: 180px;
  height: 25px;
  line-height: 25px;
}

.pc_country_select .weui-cell_select-after .weui-select {
  padding-left: 15px;
}

#form .pc_country_select .weui-label {
  width: 8em;
}

#form .vue-uploader .add + .add {
  margin-left: 10px;
}

#form .vue-uploader .file-list {
  padding-left: 5px;
}

#form .weui-cells__title {
  color: #000;
}

//flag 清除cells间距
#form .weui-cells {
  margin-top: 0;
}

#form .weui-cells:before {
  display: none;
}

#form #tel .tel .weui-cell__hd:after {
  display: none;
}

#form .tel .telcode .weui-cell {
  padding: 0;
  padding-left: 10px;
}

.pc_country_select {
  select {
    direction: rtl;
  }
  option {
    direction: ltr;
  }
}

#form .vux-datetime {
  & > div > div {
    //font-size: 0
  }
  & > div > div > p {
    width: 8em;
  }
  & > div > div > p > span {
    font-size: 17px;
  }
  .vux-datetime-value {
    font-size: 17px;
    text-align: right;
  }
  // .weui-cell__ft:after {
  //   display: none;
  // }
  .vux-cell-value {
    font-size: 17px;
  }
  .vux-cell-placeholder {
    font-size: 17px;
  }
}
</style>
<style type="text/css" scoped="scoped">
@media screen and (min-width: 850px) {
  .vux-popup-dialog {
    position: absolute;
    top: 20%;
    left: 50%;
    bottom: auto;
    width: 850px;
    margin-left: -425px;
    margin-top: 100px;
  }

  .dp-container {
    position: absolute;
    top: 20%;
    left: 50%;
    bottom: auto;
    width: 850px;
    margin-left: -425px;
    margin-top: 100px;
  }

  .scroller-component {
    overflow-y: scroll;
  }
}
</style>



